<!DOCTYPE html>
<html style="height: 100%;width:100%">
	<head>
		<meta charset="utf-8">
	</head>
	<body style="height: 100%; width:100%">
		<div id="chart-panel" style="height: 60%;width: 50%"></div>
		<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

		<script type="text/javascript">
			var dom = document.getElementById("chart-panel");
			var myChart = echarts.init(dom);
			var option;
			var app = {};
			let dataX = ['1001',
				'1002', '1003', '1004',
				'1005', '1006', '1007', '1', '2', '3', '4', '5', '6', '7',
				'8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',
				'24', '25', '26', '27',
				'855', '67867', '545', '454', '567567', '56756', 'khjh', '神鼎飞丹砂是的', '8988', '999', '0909', '45645',
				'3243', 'ghf', 'yhyh', '7867', 'hgfhfg', 'ddf', '3243wer', 'ghfrete', '苏苏1', '苏苏2', '苏苏13',
				'苏苏144',
			]; //名称
			let max = 300,
				min = 10;
			let dataY = [777,
				200, 300, 400,
				300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200,
				100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100,
				100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300,
			]; //数据
			let zoomShow = false;
			if (dataY.length > 8) {
				zoomShow = true;
			} else {
				zoomShow = false;
			}
			var option = {
				backgroundColor: '#0D2753',
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				grid: {
					top: '10%',
					right: '5%',
					left: '5%',
					bottom: '10%',
				},
				xAxis: [{
					type: 'category',
					data: dataX,
					axisLine: {
						lineStyle: {
							color: 'rgba(66, 192, 255, .3)',
						},
					},
					axisLabel: {
						interval: 0,
						margin: 10,
						color: '#05D5FF',
						textStyle: {
							fontSize: 11,
						},
						rotate: '45',
					},
					axisTick: { //刻度
						show: false,
					},
				}, ],
				yAxis: [{
					axisLabel: {
						padding: [3, 0, 0, 0],
						formatter: '{value}',
						color: 'rgba(95, 187, 235, 1)',
						textStyle: {
							fontSize: 11,
						},
					},
					axisTick: {
						show: true,
					},
					axisLine: {
						lineStyle: {
							color: 'rgba(66, 192, 255, .3)',
						},
					},
					splitLine: {
						lineStyle: {
							color: 'rgba(255,255,255,0)',
						},
					},
				}, ],
				dataZoom: [ //滚动条
					// {
					// 	show: zoomShow,
					// 	type: 'slider',
					// 	realtime: true,
					// 	startValue: 0,
					// 	endValue: 14,
					// 	xAxisIndex: [0],
					// 	bottom: '10',
					// 	left: '30',
					// 	height: 10,
					// 	borderColor: 'rgba(0,0,0,0)',
					// 	textStyle: {
					// 		color: '#05D5FF',
					// 	},
					// },

					// 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
					// 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
					// 框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在 toolbox 中。


					// 可滚动-但是不展示dataZoom的具体样式--使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
					{
						show: zoomShow,
						type: 'inside',
						realtime: true,
						startValue: 0,
						endValue: 8,
						xAxisIndex: [0],
						bottom: '10',
						left: '30',
						height: 10,
						borderColor: 'orange',
						textStyle: {
							color: '#05D5FF',
						},
					},
				],
				series: [{
						name: "susu1",
						type: "pictorialBar",
						color: "#00eded",
						symbolSize: [24, 10],
						symbolOffset: [-24, -5],
						symbolPosition: "end",
						z: 12,
						label: {
							show: true,
							offset: [-24, 0],
							position: "top",
							textAlign: "left",
							formatter: function(data) {
								if (data.value === 0) {
									return "";
								}
								return data.value;
							},
							fontSize: 12,
							color: "#fff",
						},
						itemStyle: {
							show: true,
							color: 'rgba(0, 255, 244, 0.7)'

						},
						data: dataY,
					},
					{
						type: 'bar',
						data: dataY,
						barWidth: '24',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: 'rgba(5, 213, 255, 1)', // 0% 处的颜色
										},
										{
											offset: 0.98,
											color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
										},
									],
									false
								),
								shadowColor: 'rgba(5, 213, 255, 1)',
								shadowBlur: 4,
							},
						},
						label: {
							normal: {
								show: false,
								lineHeight: 10,
								formatter: '{c}',
								position: 'top',
								textStyle: {
									color: '#fff',
									fontSize: 10,
								},
							},
						},
					},
					{
						name: "susu2", //头部
						type: "pictorialBar",
						color: "#aaaaff",
						symbolSize: [24, 10],
						// symbolOffset: [24, -5],
						symbolOffset: [0, -5],
						z: 12,
						symbolPosition: "end",
						label: {
							offset: [0, 0],
							show: true,
							position: "top",
							fontSize: 12,
							color: "#fff",
							formatter: function(data) {
								if (data.value === 0) {
									return "";
								}
								return data.value;
							},

						},
						itemStyle: {
							show: true,
							color: 'rgba(208, 9, 23, 0.7)'

						},
						data: dataY,
					},
					{
						type: 'bar',
						data: dataY,
						barWidth: '24',
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: 'rgba(255, 7, 40, 1.0)', // 0% 处的颜色
										},
										{
											offset: 0.98,
											color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
										},
									],
									false
								),
								shadowColor: 'rgba(255, 83, 138, 1.0)',
								shadowBlur: 4,
							},
						},
						label: {
							normal: {
								show: false,
								lineHeight: 10,
								formatter: '{c}',
								position: 'top',
								textStyle: {
									color: '#fff',
									fontSize: 10,
								},
							},
						},
					},


					{
						name: "susu3",
						type: "pictorialBar",
						symbolSize: [24, 10],
						symbolOffset: [24, -5],
						symbolPosition: "end",
						z: 12,
						label: {
							offset: [24, 0],
							show: true,
							position: "top",
							formatter: function(data) {
								if (data.value === 0) {
									return "";
								}
								return data.value;
							},
							fontSize: 12,
							color: "#fff",

						},
						itemStyle: {
							show: true,
							color: 'rgba(208, 120, 50, 0.7)'
						},
						data: dataY,
					},
					{
						type: 'bar',
						data: dataY,
						barWidth: '24',
						barGap: '0', //柱间距离
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
											offset: 0,
											color: 'rgba(255, 213, 41, 1.0)', // 0% 处的颜色
										},
										{
											offset: 0.98,
											color: 'rgba(5, 213, 255, 0)', // 100% 处的颜色
										},
									],
									false
								),
								shadowColor: 'rgba(255, 118, 6, 1.0)',
								shadowBlur: 4,
							},
						},
						label: {
							normal: {
								show: false,
								lineHeight: 10,
								formatter: '{c}',
								position: 'top',
								textStyle: {
									color: '#fff',
									fontSize: 10,
								},
							},
						},
					},
				],
			};
			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}
		</script>
	</body>
</html>
